<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-页面缩略图&警告&进度条</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="img/1.jpeg" class="img-responsive">
            </a>
        </div>

        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="img/1.jpeg" class="img-responsive">
            </a>
        </div>

        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="img/1.jpeg" class="img-responsive">
            </a>
        </div>

        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="img/1.jpeg" class="img-responsive">
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-3">
            <div class="thumbnail">
                <img src="img/1.jpeg">
            </div>
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些实例文本</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">按钮1</a>
                    <a href="#" class="btn btn-info" role="button">按钮2</a>
                </p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="alert alert-success"><a href="#" class="alert-link">成功</a> </div>
        <div class="alert alert-info">提示</div>
        <div class="alert alert-warning">警告</div>
        <div class="alert alert-danger alert-dismissable">危险<button type="button" data-dismiss="alert" class="close" aria-hidden="true">&times;</button> </div>
    </div>

    <div class="row">
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <span class="sr-only">80%完成</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                <span class="sr-only">60%完成</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                <span class="sr-only">40%完成</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                <span class="sr-only">20%完成</span>
            </div>
        </div>

        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <span class="sr-only">80%完成</span>
            </div>
        </div>

        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                <span class="sr-only">60%完成</span>
            </div>
        </div>

        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                <span class="sr-only">40%完成</span>
            </div>
        </div>

        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                <span class="sr-only">20%完成</span>
            </div>
        </div>

        <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-success" style="width: 20%"></div>
            <div class="progress-bar progress-bar-info" style="width: 20%"></div>
            <div class="progress-bar progress-bar-danger" style="width: 20%"></div>
        </div>
    </div>
</div>


<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>